import React,{Component} from 'react';
import {Input, Form,Steps, Icon, Button ,message } from 'antd';
import $ from 'jquery';
import Editor from 'for-editor';
require("./Markdown.css");

const Step = Steps.Step;

class Markdown extends Component{

    constructor(props){
        super(props);
        this.state={
            value: '',
            data:{}
        }
    }


    handleChange(value) {
        this.setState({
          value
        })
      }

      

      handSubmit = () => {
          console.log("保存！");
          var demo=this.props.form;
        demo.validateFields((err, values) => {
          $.ajax({
            type: "POST",
            url: "http://localhost:8007/artical/save",
            dataType: "json",
            contentType:"application/json",
            data:JSON.stringify(values),
            success: () => {
              message.success('增加成功!')
            //   this.props.fetch();
            }
          });
        });
      }

      save = (value) => {
          console.log("保存！！！");
      }

    render(){

        const { getFieldDecorator } = this.props.form;

        const { value } = this.state
        return (
            <div className="editor">

                <Steps>
                    <Step status="finish" title="标题" icon={<Icon type="edit" />} />
                    <Step status="finish" title="文章" icon={<Icon type="solution" />} />
                    <Step status="finish" title="上传" icon={<Icon type="loading" />} />
                    <Step status="process" title="完成" icon={<Icon type="smile-o" />} />
                </Steps>
                <div className="wordss">请输入标题:</div>
                <Form onSubmit={this.handSubmit}>
                    <Form.Item>
                    {getFieldDecorator('title', {
                        rules: [{ required: true, message: '请输入文章名!' }],
                    })(
                        <Input className="inputs" autoComplete="off"/>
                    )}
                    </Form.Item>
                    <Form.Item>
                    {getFieldDecorator('content', {
                        rules: [{ required: true, message: '请输入文章名!' }],
                    })(
                        <Editor value={value}
                        onChange={this.handleChange.bind(this)}
                        onSave={this.save}/>
                    )}
                    </Form.Item>
                    <Form.Item className="hello">
                        <span className="spans">作者:</span>
                    {getFieldDecorator('author', {
                        rules: [{ required: true, message: '请输入文章名!' }],
                    })(
                        <Input className="inputkk" autoComplete="off"/>
                    )}
                    </Form.Item>
                    <Form.Item className="hello">
                        <span className="spans">类型:</span>
                    {getFieldDecorator('type', {
                        rules: [{ required: true, message: '请输入文章名!' }],
                    })(
                        <Input className="inputkk" autoComplete="off"/>
                    )}
                    </Form.Item>
                    <Form.Item className="hello">
                        <span className="spans">标记:</span>
                    {getFieldDecorator('sign', {
                        rules: [{ required: true, message: '请输入文章名!' }],
                    })(
                        <Input className="inputkk" autoComplete="off"/>
                    )}
                    </Form.Item>
                
                        <Button className="tijiao" type="primary" onClick={this.handSubmit}>提交</Button>
                   
                </Form>
            </div>
        )
    }
}

const md = Form.create({withRef: true})(Markdown);

export default md;